﻿<html>
	<head>
		<title>Pure HTML and Javascript</title>
		<link rel=stylesheet href="ui-lightness/jquery-ui-1.8.12.custom.css" type="text/css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
		<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
		<script type="text/javascript">
		    $(document).ready(function () {

			/* Google Maps API Global variables */
			var layer;
			var map;

			/* jQuery UI controls */

			$("#year_slider").slider({
				value:2000,
				min: 1973,
				max: 2010,
				step: 1,
				slide: function( event, ui ) {
					/* When the slider is err... slid? */
				}
			});

			/* Plain old javascript functions */
			function updateMap(year)
			{
				layer.setMap(null);
                                layer = new google.maps.FusionTablesLayer(822471, {
                                        heatmap: true,
                                        query: {
                                                select: 'Latitude',
                                                from: '822471',
                                                where: 'Year = ' + year
                                        }
                                });             
                                layer.setMap(map);
			}

			/* jQuery event handlers */

			$("#btn").click(function() {

				function timeline(toYear){
				    function callback(){
					$("#year").val(i);
					updateMap(i);
					i++;
				        if(i>=toYear)
				            clearInterval(timer);
				    }

				    var
				        i=1973,	/* Starting time */
				        timer=setInterval(callback,3000);
				}
				timeline(2011); /* End time */	

				/*var year = $("#year_slider").slider("value");

				alert(year);

				layer.setMap(null);
				layer = new google.maps.FusionTablesLayer(822471, {
					heatmap: true,
					query: {
						select: 'Latitude',
						from: '822471',
						where: 'Year = ' + year
					}
				});		
				layer.setMap(map);*/
			});

			/* Google Maps API code */

	        	var reykjavik = new google.maps.LatLng(64.133333, -21.933333);

		        map = new google.maps.Map(document.getElementById('map_canvas'), {
        		    center: reykjavik,
	        	    zoom: 2,
		            mapTypeId: 'roadmap'
		        });

	        	layer = new google.maps.FusionTablesLayer(822471, {
		            heatmap: true
        		});
	        	layer.setMap(map);

			/* End of Google Maps API code */
		    });
		</script>
	</head>
	<body>
		<div id="map_canvas" style="height:100%;width:100%"></div>
		<div id="control_panel" style="position:absolute;bottom:0;">
			<!--div id="year_slider"></div-->
			<input type="text" id="year" /><br />
			<input id="btn" type="button" value="Press me" />
		</div>
	</body>
</html>
